<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				height: 100%;
			}

			html {
				height: 100%;
			}

			/* 大盒子 */
			#addtableone {

				width: 90%;
				/* 		box-shadow: 20px; */
				background-color: white;
				margin: 0 auto;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-top: 20px;
			}

			#header {
				top: 0px;
				background-color: white;
				position: sticky;
				z-index: 5;
			}

			#header #left {
				height: 80px;
				line-height: 80px;
				text-indent: 12px;

			}

			#header #right {
				height: 80px;

				line-height: 80px;
				/* font-size: 32px;
				font-weight: bold; */
				text-align: right;

			}

			#hr1 {

				/* width:98%;
				margin: 0 auto; */
				color: whitesmoke;
				margin-bottom: 30px;

			}
		</style>
	</head>
	<body>
		<div id="addtableone">
			<!-- 			<el-row>
			  <el-col :span="24"><div class="grid-content bg-purple-dark">
			  <div class="block">
			    <span class="demonstration"> 登记表类型</span>
			    <el-cascader
			      v-model="value"
			      :options="options"
			      @change="handleChange"></el-cascader>
			  </div>
			  </div></el-col>
			</el-row> -->
			<el-row id="header">
				<el-col :span="12">
					<div class="grid-content bg-purple" id="left">
						<h3>科研项目管理</h3>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple-light" id="right" style=" padding-right: 80px;">
						<el-button type="primary" @click="fanHui">返回</el-button>
					</div>
				</el-col>
				<hr id="hr1" />
			</el-row>
			<el-row style="padding-left: 40px;">
				<!-- 表单子属性有el-form-item,el-row(多个el-form-item)同级别,可自行删除不需要的-->
				<!-- 短框200px,长框300px,el-form-item width -->
				<!-- 选择框或输入框 label用于显示, value 与 VUE中对应属性绑定 -->
				<!--正则 el-form-item prop="值"  值和rules 中的规则对象绑定-->
				<!--最后的验证函数已经注释可正常提交 ,若想使用查看提交按钮处注释, -->
				<!-- 	刊物级别,和论文类型 使用v-for,其他的是固定的 -->
				<!-- 出版时间和现在时间已经写好可直接使用,onsubmit函数中 -->
				<!--证明材料未设置必须提交,也未绑定table中的值 掌握文件上传后才自行设置-->
				<!--提交后表单信息归零函数未设置,后期自行设置-->
				<el-form :model="form" :rules="rules" ref="ruleform" label-width="80px" class="demo-ruleForm" name>
					<el-form-item label="登记类型" style="width: 300px;" prop="region">
						<el-input v-model="form.region" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="填报人" style="width: 200px" prop="tianbaoName">
						<el-input v-model="form.tianbaoName"></el-input>
					</el-form-item>
					<el-row>
						<el-col :span="6">
							<el-form-item label="项目名称" style="width: 250px;" prop="projectName">
								<el-input v-model="form.projectName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="主持人" style="width: 250px;" prop="zhuChiRen">
								<el-input v-model="form.zhuChiRen"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="参加人数" style="width:250px" prop="zongRenShu">
								<el-input v-model.number="form.zongRenShu"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="本人排名" style="width: 250px" prop="meSort">
								<el-input v-model.number="form.meSort"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">
							<el-form-item label="出版日期" style="width: 250px" prop="lixiangDate">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.lixiangDate"
									value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="立项单位" style="width: 250px;" prop="lixiangDanWei">
								<el-input v-model="form.lixiangDanWei"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="获批经费" style="width:250px" prop="huoPiJingFei">
								<el-input v-model.number="form.huoPiJingFei"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="到账经费" style="width:250px" prop="daoZhangJingFei">
								<el-input v-model.number="form.daoZhangJingFei"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="证明材料" style="width: 100%;">
						<el-upload 
							class="upload-demo" 
							drag action="http://localhost:8080/keyan/upload" style="width: 50%;" 
							:on-error="updateError"
							:on-success="uploadSuccess"
							:on-remove="handerRemove"
							:on-progress="handerProgress"
							:before-remove="beforeRemove"
							:before-upload="beforeUpload"
							:file-list="fileList" 
							:auto-upload="true" 
							accept=".pdf,.jpg,.png">
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" v-model="form.desc"></el-input>
					</el-form-item>
					<!--  提交栏 -->
					<el-form-item>
						<el-button type="primary" @click="onsubmit('ruleform')">添加信息</el-button>
						<el-button type="primary" @click="resetForm('ruleform')">重置</el-button>
					</el-form-item>
					
				</el-form>
				<!-- </el-col> -->
			</el-row>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#addtableone',
				data: {
					lastuploadfile:'',
					fileMapprings:[],
					fileList:[],
					form: {
						tianbaoName: '',
						region: '科研项目登记表',
						projectName: '',
						zhuChiRen: '',
						zongRenShu: '',
						meSort: '',
						lixiangDate: '',
						lixiangDanWei:'',
						huoPiJingFei:'',
						daoZhangJingFei: '',
						fileList: [],
						desc:'',
					},
					
					rules: {
						tianbaoName: [{
							required: true,
							message: '请输入填报人',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 20,
							message: '长度在 1 到 20 个字符',
							trigger: 'blur'
						}],
						region: [{
							required: true
						}],
						zhuChiRen: [{
							required: true,
							message: '请输入主持人',
							trigger: 'blur'
						}],
						projectName: [{
							required: true,
							min: 1,
							message: '长度至少1的字符',
							trigger: 'blur'
						}],
						zongRenShu: [{
							required: false,
							type: 'number',
							message: '参加人数必须为数字值',
							trigger: 'blur'
						}],
						meSort: [{
							required: true,
							type: 'number',
							message: '本人排名必须为数字值',
							trigger: 'blur'
						}],
						lixiangDate: [{
							type: 'string',
							required: true,
							message: '请选择日期',
							trigger: 'change'
						}],
						lixiangDanWei: [{
							required: true,
							message: '请输入立项单位',
							trigger: 'blur'
						}],
						huoPiJingFei: [{
							required: true,
							type: 'number',
							message: '获批经费必须为数字值',
							trigger: 'blur'
						}],
						daoZhangJingFei: [{
							required: true,
							type: 'number',
							message: '到账经费必须为数字值',
							trigger: 'blur'
						}],						
					}
				},
				//生命周期函数
				created() {

				},
				methods: {
					// 绑定提交信息按钮
					onsubmit(ruleform) {
						this.$refs[ruleform].validate((valid)=>{
							if(valid){
								axios.post("http://localhost:8080/keyan/add",this.form).then((res)=>{
									console.log(res)
									window.alert("添加成功！")
									window.location="list.html"
								})
							}else{
								console.log("error submit")
								return false;
							}
						})
					},
					beforeUpload(file) {
						this.loding=true;
					},
					updateError(err, file, fileList) {
						this.$message.error(file.name+"文件上传失败，请重新上传")
						//删除文件
						let index;
						for(const i in fileList){
							if(fileList[i] == file){
								index = i;
								break;
							}
						}
						fileList.splice(index,1)
						this.$refs.uploadFile.clearFiles();
					},
					uploadSuccess(response, file, fileList){						
						console.log(response)
						console.log(file)
						console.log(fileList)
						this.loding=false;
						if(response.code == 10010){
							this.lastuploadfile = response.data.oldFilename
							let File = {
								oldFileName:"",
								newFileName:""
							}
							File.oldFileName = response.data.oldFilename
							File.newFileName = response.data.newFilename
							this.fileMapprings.push(File)
							this.form.fileList.push(File)
							console.log("+++++++++++++++++++++++++++")
							console.log(this.form.fileList)
							this.$message.success(file.name+"文件上传成功")
						}else{
							this.$message.error(file.name+"文件上传失败，请重新上传")
							let index = 0
							for(const i in fileList){
								if(fileList[i]==file){
									index=i;
									break;
								}
							}
							fileList.splice(index,1)
							this.$refs.uploadFile.clearFiles();
						}
					},
					beforeRemove(file, fileList){
						let index;
						for(const i in fileList){
							if(fileList[i] == file){
								index = file.name
								break
							}
						}
						for(const i in this.fileMapprings){
							if(this.fileMapprings[i].oldFileName==index){
								index = this.fileMapprings[i].newFileName
								break
							}
						}
						for(const i in this.form.fileList){
							if(this.form.fileList[i]==index){
								this.form.fileList.splice(i,1)
								break
							}
						}
					},
					handerRemove(file, fileList){
						console.log(this.form.fileList)
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},										
					fanHui:function(){
						window.location="list.html"
					}
				}
			})
		</script>

	</body>


</html>
